<template>
	<view>
		<view>
			<view class="flex justify-between align-center">
				<view>
					<text @click="openStart">
						<text v-if="startDate">{{ startDate }}</text>
						<text v-else>开始日期</text>
					</text>
					<text v-if="single">至</text>
					<text v-if="single" @click="openEnd">
						<text v-if="endDate">{{ endDate }}</text>
						<text v-else>结束日期</text>
					</text>
				</view>
				<view>
					<uv-icon name="close" size="16" @click="updateModelValue" v-if="value.length > 0"></uv-icon>
				</view>
			</view>
		</view>
		<view>
			<uv-datetime-picker ref="startDatePicker" v-model="startDateVlue" mode="date" :min-date="minDate"
				:max-date="maxDate" @confirm="setStartDate"></uv-datetime-picker>
			<uv-datetime-picker ref="endDatePicker" v-model="endDateValue" mode="date" :min-date="minDate"
				:max-date="maxDate" @confirm="setEndDate"></uv-datetime-picker>
			<!-- 		<button @click="openStart">打开开始日期选择器</button>
			<button @click="openEnd">打开结束日期选择器</button> -->
		</view>


	</view>

</template>

<script>
	import tip from '@/common/util/tip.js';
	import {
		strFormatDate
	} from '@/common/util/formatDat.js';
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			},
			single: {
				type: Boolean,
				default: true
			},
			minDate: {
				type: Number,
				default: 1 // 直接使用数字0作为默认值
			}, // 最小日期限制
			maxDate: {
				type: Number,
				default: 2000000000000 + 21 * 31536000000 // 直接使用数字作为默认值
			} // 最大日期限制
		},
		data() {
			return {
				startDate: (this.value?.length && this.value[0]) || '',
				endDate: (this.value?.length && this.value[1]) || '',
				startDateVlue: (this.value?.length && this.value[0]) || new Date().getTime(),
				endDateValue: (this.value?.length && this.value[1]) || new Date().getTime(),
			};
		},

		watch: {
			// 当父组件传递的值改变时同步更新内部的值
			value(newValues) {
				console.log(newValues, 'value')
				if (newValues?.length) {
					this.startDate = newValues[0];
					this.endDate = newValues[1];
				}
			},
			// 当内部值改变时通知父组件
			startDate(newValue) {
				this.updateModelValue([newValue, this.endDate]);
			},
			endDate(newValue) {
				this.updateModelValue([this.startDate, newValue]);
			}
		},
		methods: {
			openStart() {
				this.$refs.startDatePicker.open();
			},
			openEnd() {
				if (!this.startDate) {
					tip.toast('请先选择开始时间!');
					return
				}
				this.$refs.endDatePicker.open();
			},
			setStartDate(e) {
				this.startDate = e.value;
				this.updateModelValue([e.value, this.endDate]);
			},
			setEndDate(e) {
				const newEndDate = new Date(e.value);
				const currentStartDate = new Date(this.startDate);
				if (newEndDate < currentStartDate) {
					tip.toast('结束时间不能小于开始时间!');
					return
				}
				this.endDate = e.value;
				this.updateModelValue([this.startDate, e.value]);
			},
			updateModelValue(values) {
				let value = [];
				if (values?.length) {
					let startDate = values[0];
					let endDate = values[1];
					startDate && value.push(strFormatDate(startDate));
					endDate && value.push(strFormatDate(endDate));
				} else {
					this.startDate = '';
					this.endDate = '';
				}
				this.$emit('updateValue', value);
			}
		}
	};
</script>
<style scoped>
	.date-picker-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.date-range {
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.label {
		font-weight: bold;
		margin-right: 5px;
	}

	.selected-date,
	.select-date {
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.select-date {
		color: #666;
	}
</style>